<template>
	<view class="popupSelect">
		<transition>
			<view class="box" v-if="isShow">
				<view class="header"> {{ titleObj.title || "" }} </view>
				<view class="center">
					<view class="title">
						<view class="t-item"> {{ titleObj.deviceType || "" }} </view>
						<view class="t-item"> {{ titleObj.deviceName }} </view>
					</view>
					<view class="content">
						<view class="left">
							<checkbox-group @change="deviceTypeChange">
								<view v-for="(item,index) in deviceList" :key="item.id">
									<checkbox style="transform:scale(0.8)" class="color" :value="item.id" :checked="item.isChecked" /><text @click="getDeviceTypeItem(item)" class="text" :class="{active: currentIndex === item.id}">{{ item.name }}</text>
								</view>
							</checkbox-group>
						</view>
						<view class="right">
							<checkbox-group @change="deviceNameChange">
								<label v-for="(item,index) in deviceNameList" :key="item.id">
									<view>
										<checkbox style="transform:scale(0.8)" class="color" :value="item.tempCode" :checked="item.isChecked" /><text class="text">{{ item.name }}</text>
									</view>
								</label>
							</checkbox-group>
						<!-- 	<u-checkbox-group v-model="checkboxValue2" placement="column" @change="checkboxChange">
								<u-checkbox :customStyle="{marginBottom: '12px'}" v-for="(item,index) in deviceNameObj"
											:label="item.name" :name="item.id">
								</u-checkbox>
							</u-checkbox-group> -->
						</view>
					</view>
					
				</view>
				<view class="footer">
					<view class="cancel" @click="cancel">取消</view>
					<view class="confirm" @click="confirm">确定</view>
				</view>
			</view>
		</transition>
		
		<u-overlay :show="isShow" :opacity="0.5"></u-overlay>
	</view>
</template>

<script>
	export default{
		props:{
			isShow:{
				type: Boolean,
				default: false,
			},
			deviceTypeList:{
				type: Array,
				default: ()=>[]
			},
			titleObj: {
				type: Object,
			}
		},
		data() {
			return {
				deviceNameList: [],  // 设备名称列表
				deviceList: [],      // 传过来的总数据
				currentIndex: null,
			}
		},
		watch:{
			deviceTypeList:{
				deep: true,
				handler(newVal,oldVal){
					if(newVal && newVal.length > 0){
						this.deviceList = newVal
					}
					// console.log(newVal,"newVal")
				}
			}
		},
		methods:{
			// 设备类型 change 事件
			deviceTypeChange(e){
				let list = e.detail.value
				this.deviceList.forEach(item=>{
					// 如果 deviceList数组中的id 存在 list数组中
					// 就把当前项, 和子集全部变成true
					// 否则 false
					if(list.includes(item.id)){
						if(item.childrenList && item.childrenList.length > 0){
							item.childrenList.forEach(val=>{
								this.$set(val, 'isChecked', true)
							})
						}
						this.$set(item, 'isChecked', true)
					}else{
						if(item.childrenList && item.childrenList.length > 0){
							item.childrenList.forEach(val=>{
								this.$set(val, 'isChecked', false)
							})
						}
						this.$set(item, 'isChecked', false)
					}
				})
				// console.log('eeeeee', this.deviceList)
			},
			
			// 点击设备类型字体时 触发
			getDeviceTypeItem(item){
				this.deviceNameList = item.childrenList || []
				this.currentIndex = item.id
				console.log(item,'itemitem')
			},
			
			// 设备名称 change 事件
			deviceNameChange(e){
				let list = e.detail.value
				let newList = []
				let index = 0
				if(list.length > 0){
					let parentId = list[0].split("-")[0]
					let arr = list.map(item=>(item.split("-")[1]))
					// console.log(arr)
					let find = this.deviceList.find(item=> item.id === parentId + "")
					// console.log(find,'find',arr)
					find.childrenList.forEach(item=>{
						if(arr.includes(item.id)){
							this.$set(item, "isChecked", true)
						}else{
							this.$set(item, "isChecked", false)
						}
					})
					
					newList = find.childrenList
					
					newList.forEach(item=>{
						if(item.isChecked){
							index ++
						}
					})
					
					// console.log(index, newList.length)
					if(index === newList.length){
						this.deviceList.forEach(item=>{
							if(item.id === parentId + ""){
								// console.log(item,'item')
								this.$set(item, "isChecked", true)
								this.$forceUpdate()
							}
						})
					
					}else{
						this.deviceList.forEach(item=>{
							if(item.id === parentId + ""){
								this.$set(item, "isChecked", false)
							}
						})
					}
					
				}
			},
			
			
			// 点击取消 点击遮罩层
			cancel(){
				this.deviceList.forEach(item=>{
					item.isChecked = false
					if(item.childrenList && item.childrenList.length > 0){
						item.childrenList.forEach(val=>{
							val.isChecked = false
						})
					}
				})
				this.currentIndex = null
				this.deviceNameList = []
				this.$emit("cancel")
			},
			
			// 点击确定
			confirm(){
				// 提取 选中的设备名称id
				let list = []
				this.deviceList.forEach(item=>{
					if(item.childrenList && item.childrenList.length > 0){
						item.childrenList.forEach(val=>{
							if(val.isChecked){
								list.push(val.id)
							}
						})
					}
				})
				let list2 = []
				this.deviceList.forEach(item=>{
					if(item.isChecked){
						list2.push(item.id)
					}
				})
				this.$emit("confrim", this.deviceList, list2, list)
			}
		}
	}
</script>

<style lang="less" scoped>
.popupSelect{
	.box{
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
		background-color: #FFFFFF;
		.header{
			padding: 20rpx 0rpx;
			font-size: 32rpx;
			font-size: 600;
			text-align: center;
			border-bottom: 2rpx solid #C0C0C0;
		}
		.center{
			padding: 0rpx 20rpx;
			.title{
				display: flex;
				align-items: center;
				line-height: 80rpx;
				margin-bottom: 20rpx;
				.t-item{
					flex: 1;
					// text-align: center;
				}
			}
			.content{
				display: flex;
				.left{
					flex: 1;
				}
				.right{
					flex: 1.2;
				}
			}
			
			
		}
		.footer{
			display: flex;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			color: #FFFFFF;
			margin-top: 20rpx;
			.cancel{
				flex: 1;
				background-color: #fe6a6a;
			}
			.confirm{
				flex: 1;
				background-color: #317fed;
			}
		}
	}
		
	.text{
		color: #606266;
		font-size: 15px;
		line-height: 15px;
	}
	.active{
		color: red,
	}
}
// 进入前和结束后的状态
.v-enter,.v-leave-to{
	opacity: 0;
	transform: translateY(200px);
}
// 进入和离开的动画时间段
.v-enter-active,.v-leave-active{
	transition: all 0.3s ease
}
</style>
